<template>
  <div>
    <basic-container>
      <div class="company">
        <div class="company__item">
          <div class="company__item-header">
            <!-- <div class="company__item-img">
              <img src="/static/img/logo.png" alt="">
            </div>
            <div class="company__item-info">
              <div class="company__item-title"></div>
              <div class="company__item-list">
                <span></span>
              </div>
            </div> -->
            <div class="wel__info">
              <img src="/static/img/LogoZb.png" alt="" class="wel__info-img">
              <div class="wel__info-content">
                <div class="wel__info-title" style="display:flex">
                  潍坊寒亭总部基地
                  <div class="wel__info-subtitle" style="padding:5px 5px 5px 5px">
                    山东省潍坊市寒亭区北海路3777号
                  </div>
                  <div class="wel__error" @click="excptionClick">
                    <i class="el-icon-bell"></i>
                    <span class="wel__error-title">异常通知
                      <small class="wel__error-num">[ 6 ]</small>
                    </span>
                  </div>
                </div>
                <div @click="tagClick" style='padding-left:5px'>
                  <el-tag size="medium" type="success">朝气蓬勃</el-tag>
                  <el-tag size="medium" type="warning">精兵简政</el-tag>
                  <el-tag size="medium" type="danger">欣欣向荣</el-tag>
                  <el-tag size="medium" type="danger">高新产业园</el-tag>
                  <!-- <el-tag size="medium" type="success">欣欣向荣</el-tag> -->
                </div>
              </div>
            </div>
            <div class="company__extra">
              <div class="company__extra-item" @click="box=true">
                <p class="company__extra-title">
                  普惠金融指数
                </p>
                <p class="company__extra-subtitle">
                  56
                </p>
              </div>
              <div class="company__extra-item" @click="box1=true">
                <p class="company__extra-title">
                  普惠金融排名
                </p>
                <p class="company__extra-subtitle">
                  8
                  <span>/ 24</span>
                </p>
              </div>
              <div class="company__extra-item" @click="box2=true">
                <p class="company__extra-title">
                  园区贡献指数
                </p>
                <p class="company__extra-subtitle">
                  89
                </p>
              </div>
              <div class="company__extra-item" @click="box=true">
                <p class="company__extra-title">
                  园区贡献排名
                </p>
                <p class="company__extra-subtitle">
                  9
                  <span>/ 24</span>
                </p>
              </div>
            </div>
          </div>
          <basic-container>
            <el-row :span="24">
              <el-col :span="18">
                <basic-container>
                  <avue-data-box :option="option1"></avue-data-box>
                </basic-container>
                <basic-container>
                  <avue-data-icons :option="option2"></avue-data-icons>
                </basic-container>
              </el-col>
              <el-col :span="6">
                <basic-container>
                  <avue-form-detail class="wel__detail" :option="detailOption" v-model="form"></avue-form-detail>
                </basic-container>
              </el-col>
            </el-row>
          </basic-container>
        </div>
      </div>
    </basic-container>
    <basic-container>
      <avue-search :option="searchOption" v-model="searchObj"></avue-search>
    </basic-container>
    <basic-container>
      <avue-crud :option="option" :data="data">
        <template slot="menu" slot-scope="{}">

          <router-link :to="{path:'/report/capacity_bank'}">
            <el-button type="text" size="small">
              查看详情
            </el-button>
          </router-link>
        </template>
      </avue-crud>
    </basic-container>
    <el-dialog title="普惠金融指数" :visible.sync="box" width="85%">
      <avue-crud :option="pujr" :data="pujrData">
      </avue-crud>
    </el-dialog>
    <el-dialog title="企业贡献指数" :visible.sync="box2" width="85%">
      <avue-crud :option="gxd" :data="gxdData">
      </avue-crud>
    </el-dialog>
    <el-dialog title="排名" :visible.sync="box1" width="70%">
      <avue-crud :option="option7" :data="data3">
      </avue-crud>
    </el-dialog>
  </div>

</template>

<script>
import { pujrData, pujr, gxd, gxdData } from '../report/options.js'
export default {
  data() {
    return {
      pujrData: pujrData,
      pujr: pujr,
      gxd: gxd,
      gxdData: gxdData,
      box: false,
      box1: false,
      box2: false,
      form: {
        fzs: '潍坊新华总部经济投资有限公司',
        zdmj: '2500亩',
        tzgm: '约100亿元',
        rzqy: '338',
        lx: '0536-7907777',
        zgrs: 4368
      },
      data2: [
        {
          jdl: '100%',
          qyl: '90%',
          sxl: '43%',
          yxl: '21%',
          xddf: '34',
          xdpm: '3',
          zjje: '300',
          zjpm: '6',
          zjdf: '16',
          dkpm: '6',
          dkdf: '26',
          dkje: '630',
          ckrj: '46',
          zdf: '76'
        }
      ],
      data4: [
        {
          qyck: '24',
          qydk: '65',
          qyzj: '81',
          dfgz: '31',
          ygck: '86',
          ygdk: '163',
          sjkh: '37',
          kk: '61',
          pm: '7',
          df: '68'
        }
      ],
      option6: {
        header: false,
        index: true,
        align: 'center',
        addBtn: false,
        height: 300,
        editBtn: false,
        delBtn: false,
        menu: false,
        column: [
          {
            label: '信贷普惠金融',
            prop: 'xdzs',
            align: 'center',
            children: [
              {
                label: '排名',
                prop: 'xdpm'
              },
              // {
              //   label: '建档户数',
              //   prop: 'jdhs'
              // },
              {
                align: 'center',
                label: '建档率',
                prop: 'jdl'
              },
              // {
              //   label: '签约户数',
              //   prop: 'qyhs'
              // },
              {
                align: 'center',
                label: '签约率',
                prop: 'qyl'
              },
              // {
              //   label: '授信户数',
              //   prop: 'sxhs'
              // },
              {
                align: 'center',
                label: '授信率',
                prop: 'sxl'
              },
              // {
              //   label: '用信户数',
              //   prop: 'yxhs'
              // },
              {
                label: '用信率',
                prop: 'yxl'
              },
              {
                align: 'center',
                label: '得分',
                prop: 'xddf'
              }
            ]
          },
          {
            label: '中间业务',
            prop: 'xdzs',
            children: [
              {
                label: '排名',
                prop: 'zjpm'
              },

              {
                label: '金额',
                prop: 'zjje',
                href: '/#/ddd'
              },
              {
                label: '得分',
                prop: 'zjdf'
              }
            ]
          },
          {
            label: '结算',
            prop: 'xdzs',
            children: [
              {
                label: '排名',
                prop: 'dkpm'
              },
              {
                label: '存款日均',
                prop: 'ckrj'
              },
              {
                label: '贷款金额',
                prop: 'dkje'
              },
              {
                label: '得分',
                prop: 'dkdf'
              }
            ]
          },
          {
            label: '总得分',
            prop: 'zdf'
          }
        ]
      },
      option7: {
        index: true,
        border: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        menu: false,
        header: false,
        align: 'center',
        column: [
          {
            label: '园区名称',
            prop: 'name'
          },
          {
            label: '入住企业',
            prop: 'qy'
          },
          {
            label: '普惠金融指数',
            prop: 'zs'
          },
          {
            label: '排名',
            prop: 'phpm'
          },
          {
            label: '企业贡献度',
            prop: 'gxd'
          },
          {
            label: '排名',
            prop: 'gxdpm'
          }
        ]
      },
      data3: [
        {
          name: '潍坊总部基地',
          yq: 6,
          qy: 169,
          zh: '高新支行',
          zs: 76,
          gxd: 68,
          phpm: 1,
          gxdpm: 2
        },
        {
          name: '北斗信息产业园',
          yq: 3,
          qy: 131,
          zh: '寒亭支行',
          zs: 67,
          gxd: 72,
          phpm: 2,
          gxdpm: 1
        },
        {
          name: '潍坊呼叫中心',
          yq: 1,
          qy: 20,
          zh: '奎文支行',
          zs: 56,
          gxd: 42,
          phpm: 3,
          gxdpm: 3
        }
      ],
      dataOption: {
        span: 4,
        data: [
          {
            count: '23,050',
            title: '授信额度'
          },
          {
            count: '13,650',
            title: '用信额度'
          },
          {
            count: '3,125',
            title: '随薪贷'
          },
          {
            count: '13,040',
            title: '存款日均'
          },
          {
            count: '43,300',
            title: '代发工资'
          },
          {
            count: '5,760',
            title: '手机银行开户数'
          }
        ]
      },
      data: [
        {
          name: '北京云集汇通科技有限公司',
          address: '山东省潍坊市寒亭区北海路3777号45号楼',
          people: '69',
          gxd: 100,
          url: 'http://www.yunjihuitong.com',
          fr: '刘金发',
          sbh: '91110108MA00BKBJ7F',
          hy: '科技推广和应用服务业',
          zb: '250万人民币',
          dk: 235,
          ck: 63,
          khs: 51,
          phjrzs: 86,
          qygx: 69,
          zhyw: 20,
          sxd: 365
        },
        {
          name: '潍坊魔蝶舞网络科技公司',
          address: '山东省潍坊市寒亭区北海路3777号47号楼',
          people: '58',
          gxd: 100,
          url: 'http://www.yunjihuitong.com',
          fr: '张可可',
          sbh: '91110108MA00BKBJ7F',
          hy: '科技推广和应用服务业',
          zb: '250万人民币',
          dk: 33,
          ck: 136,
          khs: 22,
          phjrzs: 46,
          qygx: 43,
          zhyw: 45,
          sxd: 32
        }
      ],
      searchObj: {
        hy: [0],
        gm: 5
      },
      searchOption: {
        column: [
          {
            label: '企业行业',
            prop: 'hy',
            dicData: [
              {
                label: '农、林、牧、渔业',
                value: 0
              },
              {
                label: '采矿业',
                value: 2
              },
              {
                label: '制造业',
                value: 3
              },
              {
                label: '电力、燃气及水的生产和供应业',
                value: 4
              },
              {
                label: '建筑业',
                value: 5
              },
              {
                label: '交通运输、仓储和邮政业',
                value: 6
              },
              {
                label: '批发和零售业',
                value: 7
              },
              {
                label: '住宿和餐饮业',
                value: 8
              },
              {
                label: '金融业',
                value: 9
              },
              {
                label: '房地产业',
                value: 10
              }
            ]
          },
          {
            label: '企业规模',
            prop: 'gm',
            multiple: false,
            dicData: [
              {
                label: '50人以下',
                valie: 0
              },
              {
                label: '50-99人',
                valie: 1
              },
              {
                label: '99-200人',
                valie: 2
              },
              {
                label: '200-1000人',
                valie: 3
              },
              {
                label: '1000人以上',
                valie: 4
              }
            ]
          }
        ]
      },
      detailOption: {
        option: [
          {
            label: '企业资料',
            prop: 'tksq',
            icon: 'el-icon-view',
            column: [
              {
                label: '发展商',
                prop: 'fzs',
                span: 24
              },

              {
                label: '投资规模',
                prop: 'tzgm',
                span: 12
              },
              {
                label: '占地面积',
                prop: 'zdmj',
                span: 12
              },
              {
                label: '入住企业',
                prop: 'rzqy',
                span: 12
              },
              {
                label: '职工人数',
                prop: 'zgrs',
                span: 12
              }
              // {
              //   label: '联系方式',
              //   prop: 'lx',
              //   span: 24
              // }
            ]
          }
        ]
      },
      option2: {
        discount: true,
        data: [
          {
            title: '企业贷款',
            count: '930/2000/663',
            icon: 'icon-weituodaikuanhuankuan'
          },
          {
            title: '随薪贷',
            count: '30 / 290 / 15',
            icon: 'icon-gongziqiarenzheng'
          },
          {
            title: '存款日均',
            count: '68 / 120',
            icon: 'icon-cunkuan_o'
          },
          // {
          //   title: '存款归行率(%)',
          //   count: 35,
          //   icon: 'icon-ziyuanldpi'
          // },
          {
            title: '代发工资',
            count: '3969 / 4368',
            icon: 'icon-gongziqiarenzheng'
          },
          {
            title: '手机银行开户数',
            count: '2336 / 4368',
            icon: 'icon-shouji'
          },
          {
            title: '分析报告',
            icon: 'icon-group53',
            href: '/#/report/report_enter',
            count: 4
          }
        ]
      },
      option1: {
        span: 6,
        data: [
          {
            title: '业务维护',
            count: 1,
            icon: 'el-icon-view',
            color: 'rgb(49, 180, 141)',
            href: '/#/report/dkcs'
          },
          {
            title: '客户维护',
            count: 3,
            icon: 'icon-shujuzhanshi2',
            color: 'rgb(56, 161, 242)',
            href: '/#/report/ckwh'
          },
          {
            title: '待办事项',
            count: 6,
            icon: 'icon-shouye',
            color: 'rgb(30,90, 190)',
            //color: 'rgb(666, 56, 109)',
            href: '/#/report/dbsx'
          },
          // {
          //   title: '待办事项',
          //   count: 6,
          //   icon: 'el-icon-message',
          //   color: 'rgb(56, 161, 242)',
          //   href: '/#/report/report_todo'
          // },
          {
            title: '精准营销',
            icon: 'el-icon-message',
            color: 'rgb(117, 56, 199)',
            href: '/#/zhgl/report_marketing_park'
          }
        ]
      },
      option: {
        menuWidth: 150,
        height: 'auto',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        align: 'center',
        index: true,
        column: [
          {
            width: 250,
            label: '企业名称',
            //fixed: true,
            prop: 'name',
            search: true
          },
          {
            width: 120,
            label: '普惠金融指数',
            prop: 'phjrzs'
          },
          {
            width: 120,
            label: '企业贡献指数',
            prop: 'qygx'
          },
          {
            width: 200,
            label: '综合业务饱和度指数',
            prop: 'zhyw'
          },
          {
            width: 180,
            label: '贷款金额',
            prop: 'dk'
          },
          {
            width: 180,
            label: '随薪贷',
            prop: 'sxd'
          },
          {
            width: 180,
            label: '存款日均',
            prop: 'ck'
          },
          {
            width: 180,
            label: '手机银行开户数',
            prop: 'khs'
          },
          {
            label: '在职员工',
            prop: 'people',
            search: true
          },
          {
            label: '法人',
            prop: 'fr'
          }
        ]
      }
    }
  },
  methods: {
    excptionClick() {
      this.$router.push({ path: '/zhgl/report_worning_park' })
    },
    tagClick() {
      this.$notify({
        title: '我是标签',
        message: '点我干嘛！',
        type: 'success',
        duration: 2000
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '最终得分'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] = parseFloat(sums[index] / 3).toFixed(2)
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    }
  }
}
</script>

<style lang="scss">
.detail {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto;
  margin-bottom: 5px;
  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}
.company {
  position: relative;

  &__extra {
    position: absolute;
    right: -20px;
    &-item {
      position: relative;
      padding: 0 32px;
      display: inline-block;
      &:last-child {
        &::after {
          display: none;
        }
      }
      &:after {
        background-color: #e8e8e8;
        position: absolute;
        top: 30px;
        right: 0;
        width: 1px;
        height: 40px;
        content: '';
      }
    }
    &-title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 4px;
    }
    &-subtitle {
      cursor: pointer;
      color: rgba(0, 0, 0, 0.85);
      font-size: 30px;
      line-height: 38px;
      margin: 0;
      padding-left: 10px;
      text-align: center;
      span {
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
      }
    }
  }
  &__item {
    &-img {
      width: 80px;
      height: 80px;
      border-radius: 5px;
      overflow: hidden;
      border: 1px solid #ccc;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-header {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
    }
    &-info {
      padding: 0 20px;
      padding-top: 5px;
    }
    &-title {
      padding-top: 10px;
      margin-bottom: 10px;
      color: #333;
    }
    &-list {
      width: 200px;
      color: #666;
      font-size: 13px;
      span {
        line-height: 28px;
        margin-right: 15px;
      }
    }
    &-photo {
      margin: 0 0 20px 0;
      display: flex;
      img {
        margin-right: 20px;
        height: 8rem;
        border-radius: 5px;
        display: block;
      }
    }
    &-address {
      margin-bottom: 20px;
      font-size: 14px;
      color: #555;
    }
  }
}
.wel {
  &__header {
    padding: 25px 40px;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__detail {
    font-size: 14px;
    color: #ccc;
    .avue-form-detail__header {
      display: none;
    }
    .avue-form-detail__item {
      padding: 5px 0;
    }
    .avue-form-detail__content {
      display: block;
      font-weight: 600;
      color: #333;
      font-size: 18px;
    }
    .avue-form-detail__label {
      display: block;
      margin-bottom: 12px;
    }
  }
  &__error {
    color: #666;
    display: flex;
    cursor: pointer;
    align-items: center;
    i {
      position: relative;
      margin-right: 4px;
      font-size: 20px;
      color: #409eff;
      &::after {
        position: absolute;
        content: '';
        background-color: red;
        width: 6px;
        height: 6px;
        right: -3px;
        top: -6px;
        border-radius: 100%;
      }
    }
    &-num {
      color: #409eff;
    }
    &-title {
      font-size: 13px;
    }
  }
  &__info {
    display: flex;
    align-items: center;
    &-img {
      border-radius: 72px;
      display: block;
      width: 72px;
      height: 72px;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    &-content {
      position: relative;
      margin-left: 24px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
    &-title {
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 12px;
    }
    &-subtitle {
      cursor: pointer;
      position: relative;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
      line-height: 22px;
    }
  }
  &__extra {
    &-item {
      position: relative;
      padding: 0 25px;
      display: inline-block;
      &:last-child {
        &::after {
          display: none;
        }
      }
      &:after {
        background-color: #e8e8e8;
        position: absolute;
        top: 30px;
        right: 0;
        width: 1px;
        height: 40px;
        content: '';
      }
    }
    &-title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 4px;
    }
    &-subtitle {
      color: rgba(0, 0, 0, 0.85);
      font-size: 30px;
      line-height: 38px;
      margin: 0;
      padding-left: 5px;
      text-align: center;
      cursor: pointer;
      span {
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
      }
    }
  }
}
</style>
